<template>
  <div style="height: 100%;  overflow: hidden;  position: relative; ">
    <div id="capture" :class="{capture1:2==qrPay}" v-show="showQrcode" v-if="1==StyleBG&&2==qrPay">
      <div class="top-content">
        <p class="text text-name">我是{{nickname}}</p>
      </div>
      <div class="weml">
        <vue-qr
          :logoSrc="src2"
          :text="text"
          :size="180"
          :margin="0"
          id="ewm"
          :logoScale="0.3"
          :callback="test"
          :whiteMargin="true"
        ></vue-qr>
      </div>
    </div>
    <!-- <div id="capture" class="new_bg" v-show="showQrcode" v-else></div> -->
    <div class="btnfix" v-if="1==qrPay&&1==StyleBG">
      <!-- <a href="/wap/qcodepeoplepay.html" class="href-icon" >666666</a> -->
       <a href="javascript:;" class="href-icon" @click="has"></a> 
    </div>
    <img id="predict_img" class="hide" crossorigin="anonymous">
  </div>
</template>
<script>
//import QRCode from "qrcode"
import VueQr from "vue-qr";
import html2canvas from "html2canvas";
// import $ from 'jquery';
//import wx from 'weixin-js-sdk'
export default {
  components: {
    VueQr
  },
  data() {
    return {
      urlid: "",
      nickname: "",
      qrcodecount: {},
      text:
        "http://" +
        window.location.host +
        "/wap/wx/login?fk=1-7-" +
        this.$route.query.id +
        "-" +
        0,
      text_wcm:
        "http://" +
        window.location.host +
        "/wap/wx/login?fk=1-7-" +
        localStorage.headid +
        "-0 ",
      src2: require("../../../assets/personal/images/logo_new.png"),
      srcasd: require("../../../assets/logo.png"),
      showQrcode: true,
      qrPay: this.$route.query.qrPay,
      StyleBG: this.$route.query.style,
      fenxiang: "../../../assets/personal/images/logo_new.png"
    };
  },
  created() {
    console.log(this.qrPay)
    this.StyleBG = this.$route.query.style;
    // console.log(this.StyleBG)
    this.nickname = this.$route.query.nickname;
    this.urlid = this.$route.query.id;
    // this.has();
  },
  mounted() {
    this.has();
    this.getwxconfig();
    this.leftdays();
  },
  methods: {
    has(){
      console.log(this.qrPay)
      if(this.qrPay==2){

      }else{
      //  this.$router.push({path: '../../qrcodepeoplepay.html'});   
      // window.location.href="/wap/gxtguize.html"
      window.location.href="/wap/gxtguize.html"
      }
    },
    // login(){
    //      $('#login').click();
    // //  this.$router.push({path: '/qrcodepeoplepay.html'})
    // },
    test(dataUrl, id) {
      let content_html = document.getElementById("capture"); //要转化的div
      html2canvas(content_html, {
        scale: 2,
        logging: false,
        useCORS: true
      }).then(function(canvas) {
        document.querySelector("#capture").appendChild(canvas);
        var dataUrl = canvas.toDataURL();
        $("#predict_img")
          .attr("src", dataUrl)
          .removeClass("hide");
        console.log(window.location.pathname + window.location.search);
      });
      this.showQrcode = false;
    },
    //http://www.cnblogs.com/scode2/p/8660165.html
    //https://blog.csdn.net/zhongguohaoshaonian/article/details/79594304
    //    qrcode () {
    //       QRCode.toDataURL("http://"+window.location.host+"/wap/wx/login?fk=1-7-"+this.urlid+"-"+0)
    //        .then(url => {
    //            document.getElementById("qrcodeimg").src=url;
    //        })
    //        .catch(err => {
    //            console.error(err)
    //        })
    //    },
    leftdays() {
      this.$http
        .get(this.APIURL_PREFIX + "/api/wap/qrCodeRecord")
        .then(response => {
          this.qrcodecount = response.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    getwxconfig() {
      var vm = this;
      console.log(vm);
      this.$http
        .get(
          this.APIURL_PREFIX +
            "/api/wxs/config?url=" +
            escape(location.href.split("#")[0])
        )
        .then(response => {
          console.log(response.data);
          var appid = "wx488ae3f57360b7ea";
          wx.config({
            debug: false,
            appId: appid,
            timestamp: response.data.data.timestamp,
            nonceStr: response.data.data.noncestr,
            signature: response.data.data.signature,
            jsApiList: [
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "onMenuShareQQ",
              "onMenuShareWeibo",
              "onMenuShareQZone",
              "scanQRCode"
            ]
          });
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: "我是首象用户，我为首象代言",
              desc:
                " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
              link:
                "http://" +
                window.location.host +
                "/wap/wx/login?fk=1-38-" +
                vm.urlid +
                "-0",
              imgUrl:
                "http://static.ruitaowang.com/attached/file/2018/11/06/20181106144126178.jpg",
              success: function() {},
              cancel: function() {}
            });
            wx.onMenuShareAppMessage({
              title: "我是首象用户，我为首象代言",
              desc:
                " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
              link:
                "http://" +
                window.location.host +
                "/wap/wx/login?fk=1-38-" +
                vm.urlid +
                "-0",
              imgUrl:
                "http://static.ruitaowang.com/attached/file/2018/11/06/20181106144126178.jpg",
              success: function() {},
              cancel: function() {}
            });
            wx.onMenuShareQQ({
              title: "我是首象用户，我为首象代言",
              desc:
                " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
              link:
                "http://" +
                window.location.host +
                "/wap/wx/login?fk=1-38-" +
                vm.urlid +
                "-0",
              imgUrl:
                "http://static.ruitaowang.com/attached/file/2018/11/06/20181106144126178.jpg",
              success: function() {},
              cancel: function() {}
            });
            wx.onMenuShareWeibo({
              title: "我是首象用户，我为首象代言",
              desc:
                " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
              link:
                "http://" +
                window.location.host +
                "/wap/wx/login?fk=1-38-" +
                vm.urlid +
                "-0",
              imgUrl:
                "http://static.ruitaowang.com/attached/file/2018/11/06/20181106144126178.jpg",
              success: function() {},
              cancel: function() {}
            });
            wx.onMenuShareQZone({
              title: "我是首象用户，我为首象代言",
              desc:
                " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
              link:
                "http://" +
                window.location.host +
                "/wap/wx/login?fk=1-38-" +
                vm.urlid +
                "-0",
              imgUrl:
                "http://static.ruitaowang.com/attached/file/2018/11/06/20181106144126178.jpg",
              success: function() {},
              cancel: function() {}
            });
          });
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../../assets/business/css/index.css";
.Title {
  position: fixed;
  width: 100%;
  top: 52%;
}
.TitleP1 {
  font-weight: 200;
  color: #ffffff;
  font-size: 35px;
  font-family: "Snickles";
}
.TitleP2 {
  font-size: 18px;
  margin-top: 10px;
  color: #ffffff;
}
.shuoming {
  position: fixed;
  width: 100%;
  text-align: center;
  bottom: 4%;
  line-height: 30px;
  font-size: 16px;
  font-weight: 400;
  color: #5f3ee7;
}
.btnfix {
  position: fixed;
  bottom: 30px;
  left: 122px;
  width: 170px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 30px;
  background: url("../../../assets/personal/images/29352427753728844.png")
    no-repeat no-repeat;
  background-size: 100% 100%;
}
.btnfix a {
  line-height: 30px;
}
.capture1 {
  background: url("../../../assets/personal/images/807137901284092806.png")
    no-repeat no-repeat !important;
  background-size: 100% 100% !important;
  height: 100% !important;
}
.top-content {
  width: 80%;
  position: fixed;
  top: 3%;
  left: 10%;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}
.weml {
  background-color: #ffffff;
}
.xf-btn {
  position: absolute;
  z-index: 5;
  display: block;
  top: 63%;
  left: 50%;
  width: 3.5rem;
  height: 1.5rem;
  background: yellow;
  line-height: 1.5rem;
  font-size: 0.65rem;
  text-align: center;
  border-radius: 5px;
  margin-left: -1.75rem;
}
.jinqian {
  margin-left: 6rem;
}
#capture {
  background-image: url("../../../assets/personal/images/507830678848998606.png");
  background-size: 100% 100%;
  height: 100%;
}
.new_bg {
  background-image: url("../../../assets/personal/images/new_bg.png") !important;
  background-size: 100% 100% !important;
  height: 100% !important;
}
#ewm {
  position: fixed;
  top: 14%;
  left: 25%;
  width: 50%;
  padding: 10px;
  background: #ffffff;
}
.hide {
  display: none;
}
</style>

